<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <div class="simulate-left">
            <NewCard title="专家认证">
              <!-- 认证步骤 -->
              <div class="tabOne">
                <!-- 1 -->
                <div class="tablist" :class="[caseState=='1'?'isActive':'',caseState>1?'isOk':'']">
                  <i class="tabNum">1</i>
                  <i class="el-icon-circle-check"></i>
                  <el-button round>输入案情</el-button>
                </div>
                <b :class="[caseState==1?'isActive':'',caseState>1?'isOk':'']"></b>
                <!-- 2 -->
                <div class="tablist" :class="[caseState=='2'?'isActive':'',caseState>2?'isOk':'']">
                  <i class="tabNum">2</i>
                  <i class="el-icon-circle-check"></i>
                  <el-button round>选取案情</el-button>
                </div>
                <b :class="[caseState==1?'isActive':'',caseState>2?'isOk':'']"></b>
                <!-- 3 -->
                <div class="tablist" :class="[caseState=='3'?'isActive':'',caseState>3?'isOk':'']">
                  <i class="tabNum">3</i>
                  <i class="el-icon-circle-check"></i>
                  <el-button round>获取报告</el-button>
                </div>
              </div>

              <!-- 输入案情 ******************** -->
              <div class="inputCase" v-if="caseState=='1'">
                <el-input
                  type="textarea"
                  :rows="10"
                  placeholder="请输入内容"
                  resize="none"
                  v-model="textarea">
                </el-input>
                <div class="label-list">
                  <el-tag
                    v-for="(label,index) in labelList"
                    @click="clickTagList(label)"
                    :key="index"
                    type="info"
                    effect="plain">
                    {{ label }}
                  </el-tag>
                </div>
                <div class="select-list">
                  已选关键词：
                  <el-tag
                    :key="index"
                    v-for="(tag,index) in selectLabel"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)">
                    {{tag}}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="addTagValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                  >
                  </el-input>
                  <el-button type="text" v-else class="button-new-tag" size="small" @click="showInput">+ 关键词</el-button>
                </div>

                <SubBtn>
                    <template slot="btn">
                        <el-button round class="addBtn" @click="clickAnalysis">解析案情</el-button>
                    </template>
                </SubBtn>
              </div>
              <!-- 输入案情 ******************** end -->

              <!-- 选取案情 ******************** -->
              <div class="selectCase" v-else-if="caseState=='2'">
                <!-- 解析中 -->
                <div class="schedule" v-if="analysisState">
                  <div class="progressBar">
                    <el-progress
                      type="circle"
                      :percentage="25"
                      :stroke-width="14"
                      color="#BBBAC2"
                    ></el-progress>
                    <p>案情解析中...</p>
                    <span>约10分钟完成</span>
                  </div>
                </div>
                <!-- 案情列表 -->
                <div class="case-List" v-else>
                  <ul>
                    <li v-for="(c,index) in caseList" :key="index" @click="clickSelectCase(c)">
                      <h2>{{ c.title }}</h2>
                      <i class="firstWord">{{ getHanzi(c.title) }}</i>
                      <p class="coll_des">{{ c.background }}</p>
                      <p class="coll_source">
                        {{ c.from }} · 
                        {{ c.caseType }} · 
                        {{ c.time }}
                      </p>
                      <p class="coll_type">{{ c.type }}</p>
                      <el-checkbox
                        v-model="c.isChecked">
                      </el-checkbox>
                    </li>
                  </ul>
                  <SubBtn>
                    <template slot="btn">
                        <p>已选 3 个案例</p>
                        <el-button round class="addBtn" @click="clickGetReport">获取报告</el-button>
                    </template>
                  </SubBtn>
                </div>
              </div>
              <!-- 选取案情 ******************** end -->

              <!-- 获取报告 ********************* -->
              <div class="getReport-box" v-else>
                <div class="progressBar">
                  <el-progress
                    type="circle"
                    :percentage="100"
                    :stroke-width="14"
                    color="#BBBAC2"
                  ></el-progress>
                  <p>报告解析完成</p>
                  <el-button type="primary" round @click="againAnalysis">再解析一份</el-button>
                </div>
              </div>
              <!-- 获取报告 ********************* end -->

            </NewCard>
          </div>
        </el-col>
        <el-col :span="14">
          <!-- 推荐内容 -->
          <div class="featuredContent" v-if="rightShow=='1'">
            <FeaturedContent></FeaturedContent>
          </div>
          <!-- 详情页面 -->
          <div class="detailPage" v-else-if="rightShow=='2'">
            <DetailPage :currentDetail="selectCase"></DetailPage>
          </div>
          <!-- 获取报告 -->
          <div class="getReport" v-else>
            <getReport></getReport>
          </div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/components/subBtn/subBtn.vue"
import DetailPage from "./detailPage.vue"
import getReport from "./getReport.vue"
import FeaturedContent from "@/components/FeaturedContent"
export default {
  name:'Simulation',
  components:{NewCard,FeaturedContent,SubBtn,DetailPage,getReport},
  data(){
    return{
      caseState:'1',//1输入案情 2选取案情 3获取报告
      rightShow:'1',//1推荐内容 2案件详情 3解析报告

      // 输入案情
      textarea:'',
      //已选标签
      selectLabel:['劳务纠纷'],
      //添加标签输入框显示隐藏
      inputVisible:false,
      //添加标签输入框的值
      addTagValue:'',
      //标签列表
      labelList:['劳务纠纷','个人所得税','一带一路','跨境电商','劳务纠纷','个人所得税','一带一路','跨境电商'],

      analysisState: false,//true解析中，false选择案情
      selectCase:{},//当前选中的案情
      //案情列表
      caseList:[
        {
          title:'罗镕荣诉吉安市物价局物价行政处理案',
          background:'裁判理由：本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。',
          info:[
            '裁判理由：本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。',
            '裁判理由：本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。',
            '裁判理由：本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。',
          ],
          from:'最高人民法院',
          caseType:'（2020）最高法刑申459号',
          time:'2022-03-02',
          type:'刑事申诉再审审查',
          isChecked:false,
        },
        {
          title:'罗镕荣诉吉安市物价局物价行政处理案1',
          background:'裁判理由：本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。',
          info:[
            '裁判理由：本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。',
            '裁判理由：本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。',
            '裁判理由：本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。',
          ],
          from:'最高人民法院',
          caseType:'（2020）最高法刑申459号',
          time:'2022-03-02',
          type:'刑事申诉再审审查',
          isChecked:false,
        },
        {
          title:'罗镕荣诉吉安市物价局物价行政处理案2',
          background:'裁判理由：本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。',
          info:[
            '裁判理由：本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。',
            '裁判理由：本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。',
            '裁判理由：本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。本院经审查认为，原审生效裁判据以定罪量刑的证据不确实、不充分、依法应当予以排除。',
          ],
          from:'最高人民法院',
          caseType:'（2020）最高法刑申459号',
          time:'2022-03-02',
          type:'刑事申诉再审审查',
          isChecked:false,
        },

      ],
    }
  },
  methods:{
    // 输入案情 ************************
    //删除一个标签
    handleClose(tag) {
      this.selectLabel.splice(this.selectLabel.indexOf(tag), 1);
    },
    //显示输入框
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //回车和失去焦点添加标签
    handleInputConfirm() {
      let addTagValue = this.addTagValue;
      if (addTagValue) {
        this.selectLabel.push(addTagValue);
      }
      this.inputVisible = false;
      this.addTagValue = '';
    },
    //点击标签列表某一个标签添加
    clickTagList(label){
      this.selectLabel.push(label)
    },
    //点击解析案情
    clickAnalysis(){
      this.caseState='2'
    },
    // 输入案情 ************************end

    // 选取案情 *************************
    // 截取第一个中文汉字
    getHanzi(name) {
      let str = name.substring(0, 1);
      let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
      if (reg.test(str)) {
        return str;
      } else {
        return name.substring(1, 2);
      }
    },
    //点击其中一条案情
    clickSelectCase(item){
      this.selectCase=item
      //显示详情
      this.rightShow='2'
    },
    //点击获取报告
    clickGetReport(){
      //显示报告
      this.caseState = '3'
      //显示报告详情
      this.rightShow='3'
    },
    // 选取案情 ************************* end

    // 获取报告 *************************
    againAnalysis(){
      //回到初始状态 输入案情
      this.caseState = '1'
      //回到初始状态 推荐内容
      this.rightShow='1'
    },
    // 获取报告 ************************* end
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content ,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col>div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body{
  height: 100%;
}
::v-deep .el-card__body{
  position: relative;
  padding: 0 30px;
}
::v-deep .simulate-left .el-card__body{
  padding: 0;
}
::v-deep .simulate-left .el-card__body .top{
  display: none;
}
::v-deep .el-card__body>div{
  height: 100%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body>div::-webkit-scrollbar{
  width: 0px;
}
ul,p,h3{
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30{
  padding: 0 30px;
}

/* 一级 */
.tabOne{
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #E5E6E9;
  background-color: #F1F3FF;
  border-radius: 12px;
  padding: 26px 0;
  margin: 0 30px;
  margin-top: 15px;
}
.tabOne .tablist{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist .tabNum{
  font-style: normal;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  border: 2px solid #C8CCE2;
  border-radius: 50%;
  color: #C8CCE2;
}
.tabOne .tablist .el-icon-circle-check{
  display: none;
  font-size: 30px;
  color: #C8CCE2;
}
.tabOne .tablist.isActive .tabNum{
  border-color: #39486F;
  background-color: #39486F;
  color: #fff;
}
.tabOne .tablist.isOk .tabNum{
  display: none;
}
.tabOne .tablist.isOk .el-icon-circle-check{
  display: block;
}

.tabOne .tablist button{
  color: #9C9DA6;
  font-size: 16px;
  background-color: transparent;
  border:2px solid #C8CCE2;
  padding: 6px 20px;
  margin-top: 25px;
}
.tabOne .tablist::before{
  content: '';
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #E5E6E9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after{
  content: '';
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne>b{
  display: flex;
  align-items: flex-end;
}
.tabOne>b::before,
.tabOne>b::after{
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  border-right: 0px solid transparent;
  border-left: 6px solid #C8CCE2;
  margin-bottom: 15px;
  margin-right: 1px;
}
.tabOne>b.isOk::before,
.tabOne>b.isOk::after,
.tabOne>b.isActive::before,
.tabOne>b.isActive::after{
  border-left-color: #39486F;
}

.tabOne .tablist.isActive button,
.tabOne .tablist.isOk button,
.tabOne .tablist button:hover{
  color: #fff;
  background-color: #39486F;
  border-color: #39486F;
  /* font-weight: bold; */
}
.tabOne .tablist.isOk button{
  background-color: #909BB7;
  border-color: #909BB7;
  font-weight: 400;
}
.tabOne .tablist.isActive::before{
  display: block;
}
.tabOne .tablist.isActive::after{
  display: block;
}
@media (max-width: 1430px) {
  .tabOne .tablist button{
    padding: 6px 10px;
  }
}

/* 输入案情 */
.inputCase{
  margin: 0 30px;
  margin-top: 20px;
  margin-bottom: 60px;
}
::v-deep .inputCase .el-textarea__inner{
  font-family: Microsoft Yahei;
}
.label-list {
  margin-top: 20px;
}
.label-list .el-tag{
  width: 15%;
  margin-right: 2%;
  margin-bottom: 2%;
  padding: 0;
  text-align: center;
  height: 36px;
  line-height: 34px;
  border-radius: 18px;
  border-color: #EFEFEF;
  cursor: pointer;
}
.label-list .el-tag:nth-child(6n){
  margin-right: 0;
}
.label-list .el-tag:hover{
  background-color: #F4F5F8;
  border-color: #F4F5F8;
}

.select-list{
  font-size: 12px;
  color: #666666;
  margin: 20px 0;
}
.select-list .el-tag{
  border-color: #f7ecda;
  color: #f87a23;
  border-radius: 14px;
  margin-right: 6px;
  background-color: #FFFAF2;
}
::v-deep .select-list .el-tag .el-tag__close{
  color: #f87a23;
}
::v-deep .select-list .el-tag .el-tag__close:hover{
  background-color: #f87a23;
  color: #fff;
}

.select-list .button-new-tag {
  margin-left: 10px;
  height: 28px;
  line-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
  color: #f87a23;
}
.select-list .input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
::v-deep .select-list .input-new-tag>input{
  height: 26px;
  line-height: 26px;
}
/* 输入案情 end */

/* 选取案情 */
/* 解析中 */
.progressBar {
  text-align: center;
  margin-top: 50px;
}
::v-deep .progressBar .el-progress .el-progress__text {
  color: #f87a23;
}
.progressBar p {
  font-weight: bold;
  font-size: 18px;
  color: #333;
  margin: 0;
  margin-top: 50px;
  margin-bottom: 15px;
}
.progressBar span {
  font-size: 12px;
  color: #bababa;
}
/* 审核完成 */
.progressBar .el-button {
  display: block;
  margin: 0 auto;
  margin-top: 30px;
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 50px;
}

/* 列表 */
.case-List ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 60px;
}
.case-List ul > li {
  position: relative;
  padding: 10px 30px 10px 76px;
  border-bottom: 1px solid #efefef;
  cursor: pointer;
}
.case-List ul > li:last-child{
  border-bottom: 0;
}
.case-List ul > li:hover,
.case-List ul > li.isActive {
  background-color: #f4f5f8;
}
.case-List ul > li > i {
  position: absolute;
  left: 30px;
  top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 30px;
  height: 30px;
  background-color: #38476d;
  border-radius: 4px;
  color: #fff;
  font-style: normal;
}
.case-List ul > li:nth-child(even) > i {
  background-color: #b1bedf;
}
.case-List ul > li > h2 {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin: 0;
  padding-top: 15px;
  padding-bottom: 12px;
}
.case-List ul > li .coll_des {
  width: 100%;
  font-size: 13px;
  line-height: 20px;
  margin: 0;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.case-List ul > li .coll_source {
  margin: 0;
  margin-top: 6px;
  margin-bottom: 12px;
  line-height: 18px;
  font-size: 12px;
  color: #bbb;
}
.case-List ul > li .coll_type{
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: #777;
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
  padding: 0 10px;
  background: #F4F5F8;
  border-radius: 16px;
}

.case-List .subBtn{
  justify-content:space-between;
  align-items: center;
}
.case-List .subBtn>p{
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}

/* 多选框样式 */
.case-List .el-checkbox {
  position: absolute;
  right: 30px;
  bottom: 20px;
}
::v-deep .case-List .el-checkbox__label {
  display: none;
}

::v-deep .case-List .el-checkbox .el-checkbox__inner {
  width: 24px;
  height: 24px;
  border-color: #bbbbbb;
  background: #fff;
  border-radius: 50%;
  position: relative;
}
::v-deep .case-List .el-checkbox .is-disabled .el-checkbox__inner {
  background: #f2f2f2;
}
::v-deep .case-List .el-checkbox .is-checked .el-checkbox__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .case-List .el-checkbox__input .el-checkbox__inner::after {
  content: "";
  width: 10px;
  height: 5px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  vertical-align: middle;
  transform: rotate(0deg) scaleY(0);
  border-radius: 0px;
  background: none;
}
::v-deep .case-List .el-checkbox__input.is-checked .el-checkbox__inner::after {
  transform: rotate(-45deg) scaleY(1);
}
/* 选取案情 end*/

/* 按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px!important;
  z-index: 99;
}
::v-deep .subBtn>.el-button{
  /* width: 100px; */
  padding: 8px 20px!important;
  font-size: 14px;
  color: #606E84;
}
::v-deep .subBtn>.el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
</style>